<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="./data/citydata.js"></script>
    <script src="./jquery/jquery.js"></script>
    <script>
        function createAddOption(el,cityData){
            let select$ = $(el);
            for (let p of cityData) {
                let option$ = $("<option>")
                    .html(p.label)
                    .prop("value",p.value)
                    // 为对应的option添加自定义DOM属性childrenData
                    // 取值为当前 省份的 对应的市或区的数据
                    .prop("childrenData",p.children);
                select$.append(option$);
            }
            return select$;
        }

        $(function (){
            // console.log(cityData)
            $("#s1").append( new Option("==请选择==","") )
            $("#s2").append( new Option("==请选择==","") )
            $("#s3").append( new Option("==请选择==","") )
            // for (let p of cityData) {
            //     // $("#s1").append( new Option(p.label,p.value) )
            //     let option$ = $("<option>")
            //                     .html(p.label)
            //                     .prop("value",p.value)
            //                     // 为对应的option添加自定义DOM属性childrenData
            //                     // 取值为当前 省份的 对应的市或区的数据
            //                     .prop("childrenData",p.children);
            //     $("#s1").append(option$);
            // }
            createAddOption("#s1",cityData)
        });
        function chooseProvince(){
            // 先清空数据
            $("#s2").html("<option value=''>==请选择==</option>");
            $("#s3").html("<option value=''>==请选择==</option>").css("display","none")
            // 获取 表单元素的 value 值
            // console.log( $("#s1").val() )
            if($("#s1").val()===""){
                $("#s2").css("display","none")
            }else{
                // console.log( $("#s1").prop("selectedOptions")[0]['childrenData'] )
                // 通过select标签获取到 被选中的 option 元素
                let chooseOption = $("#s1").prop("selectedOptions")[0];
                // 获取当前 option 元素在创建时被添加的 区域数据
                let region = chooseOption.childrenData;
                // 判断是否存在 子数据
                if(region == undefined){
                    $("#s2").css("display","none")
                }else{
                    createAddOption("#s2",region);
                    $("#s2").css("display","inline")
                }
            }
        }
        function chooseRegion(){
            $("#s3").html("<option value=''>==请选择==</option>")
            if( $("#s2").val()==="" ){
                $("#s3").css("display","none");
                return;
            }
            let tempData = $("#s2").prop("selectedOptions")[0]["childrenData"];
            if(tempData===undefined) return;
            createAddOption("#s3",tempData).css("display","inline")
        }
    </script>
</head>
<body>
    <select name="" id="s1" onchange="chooseProvince()"></select>
    <select name="" id="s2" style="display: none" onchange="chooseRegion()"></select>
    <select name="" id="s3" style="display: none"></select>
</body>
</html>